<template>
  <div class="onFoot">
    <ul>
      <li
      v-for="(item,index) of list"
      v-bind:key="index"
      v-bind:class="{active:index == num}"
      @click="addClassName(index)">
        <router-link :to="item.path">
          <div>
            <span v-show="num != index"  :class="item.bi"></span>
            <span class="current" v-show="num == index" :class="item.active"></span>
            <div :class="{current:index == num}">{{item.name}}</div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list : [
               {
                    bi : "bi bi-house-door",
                    active : "bi bi-house-door-fill",
                    name : "首页",
                    path : '/home'
               },
                 {
                    bi : "bi bi-grid",
                    active : "bi bi-grid-fill",
                    name : "分类",
                    path : '/classify'
               },
                 {
                    bi : "bi bi-cart-check",
                    active : "bi bi-cart-check-fill",
                    name : "购物车",
                    path : '/cart'
               },
                 {
                    bi : "bi bi-person",
                    active : "bi bi-person-fill",
                    name : "我的",
                    path : '/person'
               }
            ],
            num : 0,
        }
    },
    methods:{
      addClassName(index){
         this.num = index;
      }
    }
}
</script>

<style lang="less">
@import "../assets/css/reset.css";
@import '../assets/less/variable.less';

.onFoot {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1001;
  background: #fff;
  box-shadow: 0px -1px 10px -8px #000;

  ul {
    width: 100%;
    height: 50px;
    display: flex;
    li {
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 25%;
      padding-top: 5px;
      a {
        display: block;
        height: 50px;
        text-align: center;
        span{
            font-size: 23px;          
        }
        div {
          font-size: 14px;
        }
      }
      
    }
  }
}

.current{
  color: @tabLight;
}
</style>